<template>
  <div>
    <el-card class="box-card">
      <!-- 头部区域 -->
      <template #header>
        <div class="header">
          <span>商品管理</span>
          <div class="extra">
            <el-button
              icon="el-icon-plus"
              type="primary"
              @click="adddrawer = true"
              >添加商品信息</el-button
            >
          </div>
        </div>
      </template>
      <!-- 搜索表单 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="商品名：">
          <el-input
            v-model="SearchGoods.goodsName"
            placeholder="商品名"
          ></el-input>
        </el-form-item>
        <el-form-item label="工厂名：">
          <el-input
            v-model="SearchGoods.factory"
            placeholder="工厂名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="GetGoods"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" type="primary" @click="SearchReset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 商品管理列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="商品名" prop="goodsName"> </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <img
              :src="scope.row.goodsImage"
              style="
                width: 50px;
                height: 50px;
                border-radius: 50%;
                object-fit: cover;
              "
              @click="previewavatar(scope.row.goodsImage)"
            />
          </template>
        </el-table-column>
        <el-table-column label="工厂" prop="factory"> </el-table-column>
        <el-table-column label="电话" prop="phone"> </el-table-column>
        <el-table-column label="邮箱" prop="email"> </el-table-column>
        <el-table-column label="备注" prop="remark"> </el-table-column>
        <el-table-column label="提交人" prop="realName"> </el-table-column>
        <el-table-column label="操作">

          <template slot-scope="scope">
            <!-- 修改抽屉 -->
            <el-drawer
              :direction="direction"
              :visible.sync="updatedrawer"
              title="商品信息修改"
            >
              <el-form :model="goods" class="addform" label-width="100px">
                <el-form-item label="商品名:">
                  <el-input v-model="goods.goodsName"></el-input>
                </el-form-item>
                <el-form-item label="图片上传:">
                  <el-upload
                    :on-success="addhandleAvatarSuccess"
                    :show-file-list="false"
                    action="http://localhost:8080/goods/avatar/upload"
                    class="avatar-uploader"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="工厂名:">
                  <el-input v-model="goods.factory"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:">
                  <el-input v-model="goods.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱:">
                  <el-input v-model="goods.email" type="text"></el-input>
                </el-form-item>
                <el-form-item label="备注:">
                  <el-input
                    v-model="goods.remark"
                    style="width: 70%"
                    type="textarea"
                  ></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button
                    style="margin-left: 50px"
                    type="primary"
                    @click="UpdateGoods"
                    >修改</el-button
                  >
                  <el-button @click="UpdateReset">重置</el-button>
                </el-form-item>
              </el-form>
            </el-drawer>

            <el-button
              slot="reference"
              circle
              icon="el-icon-edit"
              size="small"
              type="primary"
              @click="(updatedrawer = true), GetgoodsByid(scope.row.goodsId)"
            ></el-button>

            <el-button
              slot="reference"
              circle
              icon="el-icon-delete"
              size="small"
              type="danger"
              @click="goodsDelete(scope.row.goodsId)"
            ></el-button>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="没有数据" />
        </template>
      </el-table>

      <!-- 分页条 -->
      <div class="block">
        <el-pagination
          :current-page="this.pageNum"
          :page-size="this.pageSize"
          :page-sizes="[3, 5, 10]"
          :total="this.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>

      <!-- 添加抽屉 -->
      <el-drawer
        :direction="direction"
        :visible.sync="adddrawer"
        title="商品信息添加"
      >
        <el-form :model="goods" class="addform" label-width="100px">
          <el-form-item label="商品名:">
            <el-input v-model="goods.goodsName"></el-input>
          </el-form-item>
          <el-form-item label="图片上传:">
            <el-upload
              :on-success="addhandleAvatarSuccess"
              :show-file-list="false"
              action="http://localhost:8080/goods/avatar/upload"
              class="avatar-uploader"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="工厂名:">
            <el-input v-model="goods.factory"></el-input>
          </el-form-item>
          <el-form-item label="联系电话:">
            <el-input v-model="goods.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱:">
            <el-input v-model="goods.email" type="text"></el-input>
          </el-form-item>
          <el-form-item label="备注:">
            <el-input
              v-model="goods.remark"
              style="width: 70%"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <template class="tem">
              <el-button
                style="margin-left: 50px"
                type="primary"
                @click="addgoods"
                >提交</el-button
              >
              <el-button style="margin-left: 50px" @click="addreset"
                >重置</el-button
              >
            </template>
          </el-form-item>
        </el-form>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      imageUrl: "",
      // //从本地存储获取user数据
      user: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
      pageNum: 1,
      pageSize: 3,
      total: 10,
      tableData: [],
      adddrawer: false,
      updatedrawer: false,
      direction: "rtl",
      SearchGoods: {
        goodsName: "",
        factory: "",
      },
      goods: {
        userId: "",
        goodsName: "",
        goodsImage: "",
        factory: "",
        phone: "",
        email: "",
        remark: "",
      },
    };
  },
  methods: {
    //修改
    UpdateGoods(){ 
      request.put("/goods/UpdateGoods",this.goods).then(res=>{
        if(res.data.code=='0'){
            this.$message.success("修改成功")
            this.updatedrawer=false
            this.GetGoods()
        }else{
            this.$message.error("修改失败")
        }
      })
    },

     //修改表单重置
     UpdateReset(){
        this.goods.goodsName='',
        this.goods.factory='',
        this.goods.phone='',
        this.goods.email='',
        this.goods.remark='',
        this.imageUrl=''
     },
     //通过id查找信息
     GetgoodsByid(id) {
        request.get("/goods/getByid", {
            params: {
                Id: id
            }
        }).then(res => {
            if (res.data.code == '0') {
                this.goods = res.data.data
                this.imageUrl=res.data.data.goodsImage
            } else {
                this.$message.error("错误")
            }
        })

    },
    //商品信息删除
    goodsDelete(id) {
      this.$confirm("是否删除此商品信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          request
            .delete("/goods/DelGoods", {
              params: {
                Id: id,
              },
            })
            .then((res) => {
              if (res.data.code == "0") {
                this.$message.success("删除成功");
                this.GetGoods();
                this.dialog = false;
              } else {
                this.$message.error("删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //搜索重置
    SearchReset() {
      (this.SearchGoods.goodsName = ""), (this.SearchGoods.factory = "");
    },
    //头像预览
    previewavatar(imageUrl) {
      window.open(imageUrl, "_blank");
    },
    //分页方法
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      console.log(pageSize);
      this.GetGoods();
    },

    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.GetGoods();
    },
    //查询
    GetGoods() {
      request
        .get("/goods/SearchGoods", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            goodsName: this.SearchGoods.goodsName,
            factory: this.SearchGoods.factory,
          },
        })
        .then((res) => {
          if (res.data.code == "0") {
            this.tableData = res.data.data.list;
            console.log(res.data.data)
            this.total = res.data.data.total;
          } else {
            this.$message.error("查询失败");
          }
        })
        .catch((error) => {
          console.log(new error("服务异常"));
          this.$message.error("服务异常");
        });
    },
    //添加重置
    addreset() {
      (this.goods.goodsName = ""),
      (this.goods.goodsId = ""),
      (this.goods.factory = ""),
      (this.goods.phone = ""),
      (this.goods.email = ""),
      (this.goods.remark = "");
      (this.imageUrl = "");
    },
    //添加图片
    addhandleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.goods.goodsImage = res.data;
    },
    //商品添加
    addgoods() {
      if (this.goods.goodsImage != null) {
        request
          .post("/goods/AddGoods", this.goods)
          .then((res) => {
            if (res.data.code == "0") {
              this.$message.success("添加成功");
              this.adddrawer = false;
              console.log(this.goods);
              this.GetGoods();
            } else {
              this.$message.error("添加失败");
            }
          })
          .catch((error) => {
            console.log(new error("服务异常")), this.$message.error("服务异常");
          });
      } else {
        this.$message.error("未上传商品图片");
      }
    },
  },
  created() {
    this.goods.userId = this.user.data.userId;
    console.log(this.goods);
    this.GetGoods();
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text {
  font-size: 20px;
}

.item {
  padding: 18px 0;
}

.addform {
  .el-input {
    // margin-left: 10px;
    width: 70%;
  }
}

/* 头像上传样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: 100px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>